<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div class="container">
    <div class="row" style="margin-top: 20px;">
        <div class="col-12">
            <h2>
                Springboot + ES - 演示博客
            </h2>
        </div>
    </div>

    <div class="row" style="margin-top: 20px;" id="app">
        <div class="col-9">
            <form class="form-inline">
                <div class="form-group mb-2">
                    <input type="text" class="form-control" id="title-mysql" placeholder="检索你的检索" v-model="keyword">
                </div>
                <button type="button" class="btn btn-primary mb-2" style="margin-left: 5px;" v-on:click="searchWithMysql">mysql</button>
                <button type="button" class="btn btn-primary mb-2" style="margin-left: 5px;" v-on:click="searchWithEs">ES</button>
                <span style="margin-left: 10px; color: green;">耗时：{{duration}}</span>
            </form>
            <div class="row" >
                <div class="col-sm-6" v-for="(blog,index) in blogList" style="margin-top: 20px;">
                    <div class="card">
                        <div class="card-img-top">
                            <img :src="'img/'+(index+1)+'.jpg'" style="height: auto;width: 100%"/>
                        </div>
                        <div class="card-body">
                           <!-- <h5 class="card-title">{{blog.title}}</h5>-->
                            <p><span v-html="blog.name"> </span>  发布于 {{blog.createTime}}</p>
                            <a :href="'blog.html?id='+blog.id" style="font-weight: bold">...more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Springboot</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">杂谈</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">笔记</a>
                </li>
            </ul>
        </div>
        <el-pagination
                v-if="paginationShow"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app ;
    app = new Vue({
        el:'#app',
        data:{
            blogList:[],
            keyword:'',
            duration:'',
            total: 0,
            pageSize: 5,
            currentPage: 1,
            paginationShow: true
        },
        methods:{
            getBlogs () {

                const that = this;
                //const param = {"page":that.currentPage,"size":that.pageSize};
                axios.get("http://localhost:8081/log/logs",{
                    params: {
                        page: that.currentPage,
                        size : that.pageSize
                    }
                }).then(function (response) {
                    that.blogList = response.data.result;
                    that.total = response.data.count;
                })
            },

            searchWithMysql () {
                const that = this;
                const param = {"type":"mysql","keyword":that.keyword};
                axios.post("http://localhost:8081/log/search",param).then(function (response) {
                    that.blogList = response.data.logList;
                    that.duration = response.data.totalMillis;
                })
            },
            searchWithEs () {
                const that = this;
                const param = {"type":"es","keyword":that.keyword};
                axios.post("http://localhost:8081/log/search",param).then(function (response) {
                    that.blogList = response.data.logList;
                    that.duration = response.data.totalMillis;
                    that.total = response.data.total;
                })
            }
        },

        // 当前改变----当前页码改变之后，触发这个函数
        handleCurrentChange (currentPage){
            this.currentPage = currentPage;
            this.getBlogs();
        },
        //? 长度改变----改变每页显示的条数的时候  自动触发
        handleSizeChange (val) {
            this.paginationShow = false
            this.handleCurrentChange(1)
            this.$nextTick(function () {
                this.paginationShow = true;
            })
            this.pageSize = val;
            this.getBlogs();
        },
        created:function () {
            this.getBlogs();
        }
    })
</script>
</body>
</html>